<template>
  <div class="mybills-container">
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
      <div class="filter-left">
        <i class="el-icon-arrow-left" @click="goBack"></i>
      </div>
      <div class="filter-center">
        <span>账单管理</span>
      </div>
      <div class="filter-right" @click="showFilter = !showFilter">
        <span>筛选</span>
        <i class="el-icon-arrow-up" :class="{ 'el-icon-arrow-down': !showFilter }"></i>
      </div>
    </div>

    <!-- 筛选面板 -->
    <div v-if="showFilter" class="filter-panel">
      <div class="filter-item">
        <label>时间范围</label>
        <!-- 移动端使用简化的日期选择器 -->
        <div class="mobile-date-inputs">
          <div class="date-input-group">
            <label class="date-label">开始日期</label>
            <el-date-picker
              v-model="filterParams.startDate"
              type="date"
              placeholder="开始日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              class="mobile-single-date-picker"
            />
          </div>
          <div class="date-input-group">
            <label class="date-label">结束日期</label>
            <el-date-picker
              v-model="filterParams.endDate"
              type="date"
              placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              class="mobile-single-date-picker"
            />
          </div>
        </div>        
      </div>
      <!-- <div class="filter-item">
        <label>交易状态</label>
        <el-select v-model="filterParams.status" placeholder="请选择状态" @change="handleFilterChange">
          <el-option label="全部" value=""></el-option>
          <el-option label="支付成功" value="SUCCESS"></el-option>
          <el-option label="支付失败" value="FAILED"></el-option>
          <el-option label="已退款" value="REFUNDED"></el-option>
        </el-select>
      </div> -->
      <div class="filter-actions">
        <el-button size="small" @click="resetFilter">重置</el-button>
        <el-button type="primary" size="small" @click="applyFilter">确定</el-button>
      </div>
    </div>

    <!-- Tab切换 -->
    <div class="tab-bar">
      <div 
        class="tab-item" 
        :class="{ active: activeTab === 'consumption' }"
        @click="switchTab('consumption')"
      >
        消费记录
      </div>
      <div 
        class="tab-item" 
        :class="{ active: activeTab === 'recharge' }"
        @click="switchTab('recharge')"
      >
        未用充值
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 月份标题 
      <div class="month-header">
        {{ currentMonth }}
      </div>
      -->
      <!-- 消费记录列表 -->
      <div v-if="activeTab === 'consumption'" class="bill-list">
        <div v-for="(group, yearMonth) in groupedConsumptionList" :key="yearMonth" class="bill-group">
          <div class="month-header">
            {{ yearMonth }}
          </div>
          <div 
            v-for="(item, index) in group" 
            :key="`${yearMonth}-${index}`"
            class="bill-item"
            @click="showBillDetail(item)"
          >
            <div class="bill-left">
              <div class="bill-icon">
                <i class="el-icon-lightning"></i>
              </div>
              <div class="bill-info">
                <div class="bill-name">{{ userInfo.nickName }}</div>
                <div class="bill-details">
                  <span>充值: {{ item.amount }}</span>
                  <span v-if="item.refundRecord">退还: {{ item.refundRecord.amount }}</span>
                </div>
                <div class="bill-time">{{ item.createdAt }}</div>
              </div>
            </div>
                          <div class="bill-right">
                <div class="bill-amount" :class="{ 'positive': getNetAmount(item) > 0, 'negative': getNetAmount(item) < 0 }">
                  {{ getNetAmount(item) >= 0 ? '+' : '' }}{{ getNetAmount(item).toFixed(2) }}
                </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 未用充值列表 -->
      <div v-if="activeTab === 'recharge'" class="bill-list">
        <div v-for="(group, yearMonth) in groupedRechargeList" :key="yearMonth" class="bill-group">
          <div class="month-header">
            {{ yearMonth }}
          </div>
          <div 
            v-for="(item, index) in group" 
            :key="`${yearMonth}-${index}`"
            class="bill-item"
            @click="showBillDetail(item)"
          >
            <div class="bill-left">
              <div class="bill-icon">
                <i class="el-icon-water-cup"></i>
              </div>
              <div class="bill-info">
                <div class="bill-name">{{ userInfo.nickName }}</div>
                <div class="bill-time">{{ item.createdAt }}</div>
              </div>
            </div>
            <div class="bill-right">
              <div class="bill-amount positive">
                +{{ item.amount.toFixed(2) }}
              </div>
              <div class="bill-status">交易状态：支付成功</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="getCurrentList().length === 0" class="empty-state">
        <i class="el-icon-document"></i>
        <p>暂无数据</p>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        />
      </div>
    </div>

    <!-- 账单详情全屏对话框 -->
    <div v-if="showDetailDialog" class="bill-detail-dialog" @click="closeDetailDialog">
      <div class="dialog-content" @click.stop>
        <!-- 消费记录详情 -->
        <div v-if="currentBillDetail.status === 2" class="consumption-detail">
          <!-- 头部导航 -->
          <div class="dialog-header">
            <div class="header-bottom">
              <div class="nav-left">
                <i class="el-icon-arrow-left" @click="closeDetailDialog"></i>
              </div>
              <div class="nav-center">消费详情</div>
            </div>
          </div>
          
          <!-- 消费内容 -->
          <div class="bill-content">
            <div class="service-provider">
              <i class="el-icon-lightning"></i>
              <span>{{ (currentBillDetail.powerPointInfo && currentBillDetail.powerPointInfo.powerName) || '' }}</span>
            </div>
            
            <div class="recharge-amount">
              消费金额{{ getNetAmount(currentBillDetail) }}元
            </div>
            
            <div class="bill-details">
              <div class="detail-item">
                <span class="detail-label">消费说明</span>
                <span class="detail-value">扫码用电消费</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">户号</span>
                <span class="detail-value">{{ currentBillDetail.userId || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">支付时间</span>
                <span class="detail-value">{{ currentBillDetail.createdAt }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">订单号</span>
                <span class="detail-value">{{ currentBillDetail.orderId }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">电表号</span>
                <span class="detail-value">{{ currentBillDetail.meterNo || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">充值金额</span>
                <span class="detail-value">{{ currentBillDetail.amount }} 元</span>
              </div>
              <div class="detail-item" v-if="currentBillDetail.refundRecord">
                <span class="detail-label">退款金额</span>
                <span class="detail-value">{{ currentBillDetail.refundRecord.amount }}元</span>
              </div>
              <div class="detail-item" v-if="currentBillDetail.refundRecord">
                <span class="detail-label">退款时间</span>
                <span class="detail-value">{{ currentBillDetail.refundRecord.createdAt }}</span>
              </div>
              
              
              <!-- 用电记录详细信息 -->
              <div  class="record-details" v-if="currentBillDetail.record">
                <div class="detail-section-title">用电详情</div>
                <div class="detail-item">
                  <span class="detail-label" >用电量</span>
                  <span class="detail-value">{{ currentBillDetail.record.energy }} 度</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label" >费用</span>
                  <span class="detail-value">{{ currentBillDetail.record.cost }} 元</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">开始时间</span>
                  <span class="detail-value">{{ currentBillDetail.record.createdAt }}</span>
                </div>
                <div class="detail-item" >
                  <span class="detail-label">结束时间</span>
                  <span class="detail-value">{{ currentBillDetail.record.finishedTime }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label" >使用时长</span>
                  <span class="detail-value">{{ currentBillDetail.record.useTime }} 分钟</span>
                </div>
              </div>           
              
            </div>
          </div>
        </div>
        
        <!-- 充值记录详情 -->
        <div v-else class="recharge-detail">
          <!-- 头部导航 -->
          <div class="dialog-header">
            <div class="header-bottom">
              <div class="nav-left">
                <i class="el-icon-arrow-left" @click="closeDetailDialog"></i>
              </div>
              <div class="nav-center">充值详情</div>
            </div>
          </div>
          
          <!-- 充值内容 -->
          <div class="bill-content">
            <div class="service-provider">
              <i class="el-icon-water-cup"></i>
              <span>{{ currentBillDetail.powerPointInfo.powerName }}</span>
            </div>
            
            <div class="recharge-amount">
              已充值{{ currentBillDetail.amount }}元
            </div>
            
            <div class="bill-details">
              <div class="detail-item">
                <span class="detail-label">缴费说明</span>
                <span class="detail-value">扫码用电充值</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">户号</span>
                <span class="detail-value">{{ currentBillDetail.userId || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">支付时间</span>
                <span class="detail-value">{{ currentBillDetail.createdAt }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">订单号</span>
                <span class="detail-value">{{ currentBillDetail.orderId }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">电表号</span>
                <span class="detail-value">{{ currentBillDetail.meterNo || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">交易状态</span>
                <span class="detail-value">支付成功</span>
              </div>
            </div>
          </div>
          
          <!-- 底部按钮 -->
          <div class="dialog-footer">
            <button class="refund-btn" @click="handleRefund" :disabled="refunding">
              {{ refunding ? '退款中...' : '退款' }}
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { listRecharge } from '@/api/business/recharge'
import { createRefund } from '@/api/wechat'
import { listDevice } from '@/api/device/device'
import { getByOrderId } from '@/api/business/record'

export default {
  name: 'MyBills',
  data() {
    return {
      activeTab: 'consumption', // 当前激活的tab
      showFilter: false, // 是否显示筛选面板
      userInfo: window.userInfo,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: window.userInfo.userId,
        params: {}
      },
      
      // 筛选参数
      filterParams: {
        startDate: '',
        endDate: '',
        status: ''
      },
      
      // 数据列表
      consumptionList: [],
      rechargeList: [],
      total: 0,
      
      // 加载状态
      loading: false,
      
      // 账单详情对话框
      showDetailDialog: false,
      currentBillDetail: {},
      refunding: false,
      
      // 日期选择器配置
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  
  computed: {
    // 获取当前tab的数据列表
    getCurrentList() {
      return () => {
        return this.activeTab === 'consumption' ? this.consumptionList : this.rechargeList
      }
    },
    
    // 按年月分组的消费记录
    groupedConsumptionList() {
      return this.groupByYearMonth(this.consumptionList)
    },
    
    // 按年月分组的充值记录
    groupedRechargeList() {
      return this.groupByYearMonth(this.rechargeList)
    }
  },
  
  mounted() {
    this.getList()
  },
  
  methods: {
    // 返回上一页
    goBack() {
      this.$router.push('/wechat/mine')
    },
    
    // 切换tab
    switchTab(tab) {
      this.activeTab = tab
      this.queryParams.pageNum = 1
      this.getList()
    },
    
    // 获取列表数据
    async getList() {
      this.loading = true
      try {
        if (this.activeTab === 'consumption') {
          this.queryParams.status = 2
        } else {
          this.queryParams.status = 1
        }
        const response = await listRecharge(this.queryParams)
        
        if (this.activeTab === 'consumption') {
          this.consumptionList = response.rows || []
          console.log('消费记录数据:', this.consumptionList)
        } else {
          this.rechargeList = response.rows || []
          console.log('充值记录数据:', this.rechargeList)
        }
        
        this.total = response.total || 0
      } catch (error) {
        console.error('获取账单列表失败:', error)
        this.$message.error('获取账单列表失败')
      } finally {
        this.loading = false
      }
    },
    
    // 处理筛选变化
    handleFilterChange() {
      // 筛选参数变化时的处理逻辑
    },
    
    
    // 重置筛选
    resetFilter() {
      this.filterParams = {
        startDate: '',
        endDate: '',
        status: ''
      }
      this.applyFilter()
    },
    
    // 应用筛选
    applyFilter() {
      this.showFilter = false
      this.queryParams.pageNum = 1
      // 处理日期范围
      try {
        if (this.filterParams.startDate && this.filterParams.endDate) {
          this.queryParams.params["beginCreatedAt"] = this.filterParams.startDate + ' 00:00:00'
          this.queryParams.params["endCreatedAt"] = this.filterParams.endDate + ' 23:59:59'
          
        } else {
          this.queryParams.params["beginCreatedAt"] = null
          this.queryParams.params["endCreatedAt"] = null
        }
      } catch (error) {
        alert('应用筛选失败:' + error)
        
      } 
      this.getList()
    },
    
    // 处理分页大小变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.queryParams.pageNum = 1
      this.getList()
    },
    
    // 处理当前页变化
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    
    // 按年月分组数据
    groupByYearMonth(list) {
      const groups = {}
      
      list.forEach(item => {
        if (item.createdAt) {
          const date = new Date(item.createdAt)
          const yearMonth = `${date.getFullYear()}年${date.getMonth() + 1}月`
          
          if (!groups[yearMonth]) {
            groups[yearMonth] = []
          }
          groups[yearMonth].push(item)
        }
      })
      
      // 按年月倒序排列（最新的在前面）
      const sortedGroups = {}
      Object.keys(groups)
        .sort((a, b) => {
          const dateA = new Date(groups[a][0].createdAt)
          const dateB = new Date(groups[b][0].createdAt)
          return dateB - dateA
        })
        .forEach(key => {
          sortedGroups[key] = groups[key]
        })
      return sortedGroups
    },
    
    // 计算净金额（充值金额 - 退款金额）
    getNetAmount(item) {
      const rechargeAmount = parseFloat(item.amount) || 0
      const refundAmount = item.refundRecord ? (parseFloat(item.refundRecord.amount) || 0) : 0
      return rechargeAmount - refundAmount
    },
    
    // 显示账单详情
    showBillDetail(item) {
      // 使用Vue.set确保响应式更新
      this.currentBillDetail = item
      this.showDetailDialog = true
      this.getDeviceInfo(item.meterNo)
    },
    
    // 关闭账单详情
    closeDetailDialog() {
      this.showDetailDialog = false
      // 重置数据，确保响应式更新
      this.currentBillDetail = {}
    },
    
    // 处理退款
    async handleRefund() {
      if (!this.currentBillDetail.orderId) {
        this.$message.error('订单号不能为空')
        return
      }
      
      // 只有充值记录才能退款
      if (this.currentBillDetail.status !== 1) {
        this.$message.error('只有充值记录才能申请退款')
        return
      }
      
      try {
        this.refunding = true
        
        const refundRequest = {
          outTradeNo: this.currentBillDetail.orderId,
          refundAmount: Math.round(this.currentBillDetail.amount * 100) // 转换为分
        }
        
        await createRefund(refundRequest)
        
        this.$message.success('退款申请已提交')
        this.closeDetailDialog()
        
        // 刷新列表
        this.getList()
      } catch (error) {
        console.error('退款失败:', error)
        this.$message.error('退款失败，请稍后重试')
      } finally {
        this.refunding = false
      }
    },
    async getDeviceInfo(meterNo) {
      try {
        const query = {
          meterNo: meterNo
        }        
        const result = await listDevice(query)      
        if (result.code === 200 && result.rows && result.rows.length > 0) {
          const deviceInfo = result.rows[0]
          const meterId = deviceInfo.id
          const powerPointInfo = deviceInfo.powerPointInfo
          // 使用Vue.set确保响应式更新
          this.$set(this.currentBillDetail, 'powerPointInfo', powerPointInfo)
          console.log('设备信息:', powerPointInfo)
        } else {
          this.$message.warning(`未找到表号为 ${meterNo} 的设备信息`)
        }
      } catch (error) {
        console.error('查询设备信息失败:', error)
        this.$message.error('查询设备信息失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mybills-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  padding-bottom: 60px;
  -webkit-overflow-scrolling: touch; // 移动端滚动优化
  touch-action: manipulation; // 防止双击缩放
  
  // 移动端容器优化
  @media screen and (max-width: 768px) {
    padding-bottom: 50px;
  }
}

// 头部导航
.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  
  .nav-left, .nav-right {
    width: 40px;
    text-align: center;
    
    i {
      font-size: 18px;
      color: #333;
      cursor: pointer;
    }
  }
  
  .nav-center {
    flex: 1;
    text-align: center;
    
    .page-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 2px;
    }
    
    .page-subtitle {
      font-size: 12px;
      color: #999;
    }
  }
}

// 筛选栏
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #409eff;
  border-bottom: 1px solid #eee;
  
  .filter-left {
    width: 40px;
    text-align: center;
    
    i {
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      touch-action: manipulation;
      
      &:active {
        opacity: 0.8;
      }
    }
  }
  
  .filter-center {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    height: 32px;
    line-height: 32px;
  }
  
  .filter-right {
    width: 60px;
    text-align: right;
    cursor: pointer;
    touch-action: manipulation;
    
    span {
      font-size: 14px;
      color: #fff;
      margin-right: 5px;
    }
    
    i {
      font-size: 12px;
      color: #fff;
    }
    
    &:active {
      opacity: 0.8;
    }
  }
  
  // 移动端筛选栏优化
  @media screen and (max-width: 768px) {
    padding: 8px 12px;
    
    .filter-left {
      width: 36px;
      
      i {
        font-size: 15px;
      }
    }
    
    .filter-center {
      font-size: 15px;
    }
    
    .filter-right {
      width: 56px;
      
      span {
        font-size: 13px;
        margin-right: 4px;
      }
      
      i {
        font-size: 11px;
      }
    }
  }
}

// 筛选面板
.filter-panel {
  background-color: #fff;
  padding: 15px;
  border-bottom: 1px solid #eee;
  
  .filter-item {
    margin-bottom: 15px;
    
    label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: #333;
    }
    
    .el-date-picker,
    .el-select {
      width: 100%;
    }
  }
  
  .filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    
    .el-button {
      min-width: 80px;
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
      }
    }
  }
  
  // 移动端筛选面板优化
  @media screen and (max-width: 768px) {
    padding: 12px;
    
    .filter-item {
      margin-bottom: 12px;
      
      label {
        font-size: 13px;
        margin-bottom: 6px;
      }
    }
    
    .filter-actions {
      gap: 8px;
      margin-top: 15px;
      
      .el-button {
        padding: 8px 16px;
        font-size: 13px;
        min-height: 36px;
        touch-action: manipulation;
      }
    }
  }
}

// 移动端日期选择器优化
.mobile-date-picker {
  .el-input__inner {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    width: 100%;
    
    &:focus {
      border-color: #409eff;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
    
    &:hover {
      border-color: #c0c4cc;
    }
  }
  
  .el-range-separator {
    padding: 0 8px;
    font-size: 12px;
  }
  
  .el-range-input {
    font-size: 14px;
  }
}

// 移动端日期输入器样式
.mobile-date-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  
  .date-input-group {
    .date-label {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
      color: #666;
      font-weight: normal;
    }
    
    .mobile-single-date-picker {
      width: 100%;
      
      .el-input__inner {
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
        border-radius: 6px;
        border: 1px solid #dcdfe6;
        transition: all 0.3s ease;
        
        &:focus {
          border-color: #409eff;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }
        
        &:hover {
          border-color: #c0c4cc;
        }
      }
      
      .el-input__suffix {
        .el-input__suffix-inner {
          .el-input__icon {
            font-size: 16px;
            color: #c0c4cc;
          }
        }
      }
    }
  }
}

// 桌面端显示范围选择器，隐藏单个日期选择器
.desktop-only {
  display: block;
}

// 移动端隐藏范围选择器，显示单个日期选择器
@media screen and (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  
  .mobile-date-inputs {
    display: flex;
  }
}

// 移动端日期选择器弹窗优化
:deep(.el-picker-panel) {
  .el-picker-panel__content {
    .el-date-range-picker__content {
      .el-date-range-picker__header {
        .el-picker-panel__icon-btn {
          width: 32px;
          height: 32px;
          line-height: 32px;
        }
        
        .el-picker-panel__link-btn {
          font-size: 14px;
          padding: 4px 8px;
        }
      }
      
      .el-date-table {
        th {
          padding: 8px 0;
          font-size: 12px;
        }
        
        td {
          padding: 4px 0;
          
          .el-date-table__cell {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
          }
        }
      }
    }
  }
  
  .el-picker-panel__shortcut {
    padding: 8px 12px;
    font-size: 14px;
  }
}

// 移动端响应式优化
@media screen and (max-width: 768px) {
  .filter-panel {
    padding: 12px;
    
    .filter-item {
      margin-bottom: 12px;
      
      label {
        font-size: 13px;
        margin-bottom: 6px;
      }
    }
    
    .filter-actions {
      gap: 8px;
      margin-top: 15px;
      
      .el-button {
        padding: 8px 16px;
        font-size: 13px;
        min-height: 36px;
        touch-action: manipulation;
      }
    }
  }
  
  .mobile-date-picker {
    .el-input__inner {
      font-size: 13px;
      height: 36px;
      line-height: 36px;
      padding: 0 10px;
    }
    
    .el-range-separator {
      padding: 0 6px;
      font-size: 11px;
    }
    
    .el-range-input {
      font-size: 13px;
    }
  }
  
  .mobile-date-inputs {
    .date-input-group {
      .mobile-single-date-picker {
        .el-input__inner {
          font-size: 13px;
          height: 36px;
          line-height: 36px;
          padding: 0 10px;
          min-height: 36px;
          touch-action: manipulation;
        }
      }
    }
  }
  
  // 确保日期选择器在移动端正确显示
  :deep(.el-picker-panel) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important;
    max-width: 320px !important;
    z-index: 3000 !important;
    
    .el-picker-panel__content {
      .el-date-range-picker__content {
        .el-date-range-picker__header {
          .el-picker-panel__icon-btn {
            width: 28px;
            height: 28px;
            line-height: 28px;
          }
          
          .el-picker-panel__link-btn {
            font-size: 13px;
            padding: 3px 6px;
          }
        }
        
        .el-date-table {
          th {
            padding: 6px 0;
            font-size: 11px;
          }
          
          td {
            padding: 2px 0;
            
            .el-date-table__cell {
              height: 28px;
              line-height: 28px;
              font-size: 13px;
              min-height: 28px;
              touch-action: manipulation;
            }
          }
        }
      }
    }
    
    .el-picker-panel__shortcut {
      padding: 6px 10px;
      font-size: 13px;
      min-height: 32px;
      touch-action: manipulation;
    }
  }
}

// Tab切换
.tab-bar {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    position: relative;
    touch-action: manipulation;
    transition: all 0.2s ease;
    
    &.active {
      color: #409eff;
      font-weight: 500;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 2px;
        background-color: #409eff;
      }
    }
    
    &:active {
      background-color: #f5f7fa;
    }
    
    // 移动端触摸反馈
    @media screen and (max-width: 768px) {
      padding: 14px 0;
      font-size: 15px;
      
      &:active {
        background-color: #f0f2f5;
      }
    }
  }
}

// 内容区域
.content-area {
  height: calc(100vh - 120px - 60px); // 减去头部导航、筛选栏和分页器的高度
  overflow-y: auto;
  padding: 0 15px;
  background-color: #f5f5f5;
  -webkit-overflow-scrolling: touch; // 移动端滚动优化
  
  // 移动端内容区域优化
  @media screen and (max-width: 768px) {
    padding: 0 12px;
    height: calc(100vh - 110px - 50px); // 移动端调整高度计算
  }
  
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
    
    &:hover {
      background: #a8a8a8;
    }
  }
}

// 账单分组
.bill-group {
  margin-bottom: 20px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  // 移动端账单分组优化
  @media screen and (max-width: 768px) {
    margin-bottom: 16px;
  }
}

// 月份标题
.month-header {
  padding: 15px 0 10px;
  font-size: 14px;
  color: #999;
  background-color: #f5f5f5;
  margin: 0 -15px 10px;
  padding-left: 15px;
  font-weight: 500;
  
  // 移动端月份标题优化
  @media screen and (max-width: 768px) {
    padding: 12px 0 8px;
    font-size: 13px;
    margin: 0 -12px 8px;
    padding-left: 12px;
  }
}

// 账单列表
.bill-list {
  padding-bottom: 20px; // 为底部留出空间
  
  // 移动端账单列表优化
  @media screen and (max-width: 768px) {
    padding-bottom: 16px;
  }
  
  .bill-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation; // 防止双击缩放
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(0);
      background-color: #f8f9fa;
    }
    
    // 移动端触摸反馈
    @media screen and (max-width: 768px) {
      padding: 12px;
      margin-bottom: 8px;
      border-radius: 6px;
      
      &:active {
        transform: scale(0.98);
        background-color: #f0f2f5;
      }
    }
    
    .bill-left {
      display: flex;
      align-items: center;
      flex: 1;
      
      .bill-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #f0f9ff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        
        i {
          font-size: 18px;
          color: #409eff;
        }
        
        // 移动端账单图标优化
        @media screen and (max-width: 768px) {
          width: 36px;
          height: 36px;
          margin-right: 10px;
          
          i {
            font-size: 16px;
          }
        }
      }
      
      .bill-info {
        flex: 1;
        
        .bill-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 5px;
        }
        
        .bill-details {
          font-size: 12px;
          color: #666;
          margin-bottom: 5px;
          
          span {
            margin-right: 10px;
          }
        }
        
        .bill-time {
          font-size: 12px;
          color: #999;
        }
        
        // 移动端账单信息优化
        @media screen and (max-width: 768px) {
          .bill-name {
            font-size: 15px;
            margin-bottom: 4px;
          }
          
          .bill-details {
            font-size: 11px;
            margin-bottom: 4px;
            
            span {
              margin-right: 8px;
            }
          }
          
          .bill-time {
            font-size: 11px;
          }
        }
      }
    }
    
    .bill-right {
      text-align: right;
      
      .bill-amount {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 5px;
        
        &.positive {
          color: #f56c6c;
        }
        
        &.negative {
          color: #67c23a;
        }
      }
      
      .bill-status {
        font-size: 12px;
        color: #999;
      }
      
      // 移动端账单右侧信息优化
      @media screen and (max-width: 768px) {
        .bill-amount {
          font-size: 15px;
          margin-bottom: 4px;
        }
        
        .bill-status {
          font-size: 11px;
        }
      }
    }
  }
}

// 空状态
.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #999;
  
  i {
    font-size: 48px;
    margin-bottom: 15px;
    display: block;
  }
  
  p {
    font-size: 14px;
  }
  
  // 移动端空状态优化
  @media screen and (max-width: 768px) {
    padding: 40px 0;
    
    i {
      font-size: 40px;
      margin-bottom: 12px;
    }
    
    p {
      font-size: 13px;
    }
  }
}

// 分页
.pagination-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #fff;
  padding: 15px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  
  // 移动端分页器优化
  @media screen and (max-width: 768px) {
    padding: 12px;
    
    :deep(.el-pagination) {
      .el-pagination__total,
      .el-pagination__sizes,
      .el-pagination__jump {
        font-size: 12px;
      }
      
      .el-pagination__total {
        margin-right: 8px;
      }
      
      .el-pagination__sizes {
        margin-right: 8px;
        
        .el-select {
          .el-input {
            .el-input__inner {
              font-size: 12px;
              height: 28px;
              line-height: 28px;
            }
          }
        }
      }
      
      .el-pagination__jump {
        .el-input {
          .el-input__inner {
            font-size: 12px;
            height: 28px;
            line-height: 28px;
            width: 40px;
          }
        }
      }
      
      .btn-prev,
      .btn-next {
        min-width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
      }
      
      .el-pager {
        li {
          min-width: 28px;
          height: 28px;
          line-height: 28px;
          font-size: 12px;
        }
      }
    }
  }
}

// 底部导航
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 1000;
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    cursor: pointer;
    
    i {
      font-size: 20px;
      color: #999;
      margin-bottom: 4px;
    }
    
    span {
      font-size: 12px;
      color: #999;
    }
    
    &.active {
      i, span {
        color: #409eff;
      }
    }
  }
}

// 账单详情全屏对话框
.bill-detail-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 2000;
  overflow: hidden;
  
  .dialog-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  // 状态栏
  .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    background-color: #fff;
    font-size: 12px;
    color: #333;
    
    .status-icons {
      display: flex;
      align-items: center;
      gap: 5px;
      
      i {
        font-size: 10px;
        color: #666;
      }
    }
  }
  
  // 头部导航
  .dialog-header {
    background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
    color: #fff;
    
    .header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      
      .header-left, .header-right {
        width: 40px;
        text-align: center;
        
        i {
          font-size: 18px;
          cursor: pointer;
        }
      }
      
      .header-center {
        flex: 1;
        text-align: center;
        
        .header-title {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 2px;
        }
        
        .header-url {
          font-size: 10px;
          opacity: 0.8;
        }
      }
    }
    
    .header-bottom {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      
      .nav-left {
        width: 40px;
        text-align: center;
        
        i {
          font-size: 18px;
          cursor: pointer;
        }
      }
      
      .nav-center {
        flex: 1;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
  
  // 账单内容
  .bill-content {
    flex: 1;
    padding: 20px 15px;
    overflow-y: auto;
    
    .service-provider {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      
      i {
        font-size: 20px;
        color: #409eff;
        margin-right: 10px;
      }
      
      span {
        font-size: 16px;
        color: #333;
      }
    }
    
    .recharge-amount {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      text-align: center;
      margin-bottom: 30px;
    }
    
    .bill-details {
      .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .detail-label {
          font-size: 14px;
          color: #666;
        }
        
        .detail-value {
          font-size: 14px;
          color: #333;
          font-weight: 500;
        }
      }
      
      // 用电详情部分样式
      .record-details {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #f0f0f0;
        
        .detail-section-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin-bottom: 15px;
          padding-left: 10px;
          border-left: 3px solid #f56c6c;
        }
      }
    }
  }
  
  // 消费记录详情样式
  .consumption-detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .service-provider i {
      color: #f56c6c; // 消费记录使用红色图标
    }
    
    .recharge-amount {
      color: #f56c6c; // 消费金额使用红色
    }
  }
  
  // 充值记录详情样式
  .recharge-detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .service-provider i {
      color: #409eff; // 充值记录使用蓝色图标
    }
    
    .recharge-amount {
      color: #409eff; // 充值金额使用蓝色
    }
  }
  
  // 底部按钮
  .dialog-footer {
    padding: 20px 15px;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
    
    .refund-btn {
      width: 100%;
      height: 50px;
      background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      
      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
  
  // 浮动提示
  .floating-hint {
    position: absolute;
    bottom: 80px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #666;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style>
